<template>
    <view>
        <view class="header">
            <image class="headerBack" src="../../static/img/png03.png"></image>
            <!--<view class="headerMain">
                <view class="fl">聊天</view>
                <view class="fr">
                    <image src="../../static/img/icon16.png" v-if="!isDel" @click="isDel = !isDel"></image>
                    <text class="submit" v-if="isDel" @click="chatSubmit">确定</text>
                    <text v-if="isDel" @click="chatCancel">取消</text>
                </view>
            </view>-->
            <view class="top_nav_box">
                <navigation-custom :config="config" @customConduct="customConduct" />
            </view>
        </view>
        <view class="list">
            <view class="li" @click="$common.go(1,`/pages/chat/detail?id=${item.toid.split('-')[1]}&shopName=${item.nickname}`)" v-for="(item,index) in list" :key="index">
                <view class="select" v-if="isDel">
                    <u-checkbox-group>
                        <u-checkbox shape="circle" :checked="item.checked" @change="toggleSelect(index)"></u-checkbox>
                    </u-checkbox-group>
                </view>
                <view class="fl">
                    <image :src="item.avatar ? item.avatar : '../../static/img/logo_app.png'"></image>
                </view>
                <view class="fr">
                    <view class="h1">
                        <view class="h1Fl one">{{item.nickname}}</view>
                        <view class="h1Fr">{{$common.formatTimestamp(item.update_time * 1000)}}</view>
                    </view>
                    <view class="h2">
                        <view class="h2Fl one">{{item.content}}</view>
                        <!--                        <view class="h2Fr">99+</view>-->
                    </view>
                </view>
            </view>
            <u-loadmore v-if="loading" :status="'loading'" />
            <u-loadmore v-if="noMore" :status="'nomore'" />
            <noData v-if="noData"></noData>
        </view>
        <tabbarBox :valueVal="2"></tabbarBox>
    </view>
</template>

<script>
    import navigationCustom from "@/components/struggler-navigationCustom/navigation-custom.vue"
    export default {
        components:{
            navigationCustom
        },
        data() {
            return {
                list:[],
                page:1,
                isDel:false,
                selectId:[],
                config: {
                    title: "聊天列表", //title
                    bgcolor: "transparent", //背景颜色
                    fontcolor: "#fff", //文字颜色，默认白色
                    type: 4, //type 1，3胶囊 2，4无胶囊模式
                    transparent: false, //是否背景透明 默认白色
                    linear: false, //是为开启下滑渐变
                    share: false, //是否将主页按钮显示为分享按钮
                    menuIcon: "../../static/icon/back2.png", //当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
                    // menuText:"返回", //当type为3或4的时候icon右边的文字
                },

                totalPages:0,
                noMore:false,
                loading:false,
                noData:false,
            }
        },
        onLoad() {
            this.getSessionFun();
        },
        onReachBottom(){
            if(this.page == this.totalPages) return this.noMore = true;
            this.loading = true;
            this.page ++;
            this.getSessionFun();
        },
        methods: {
            customConduct() {
                uni.navigateBack({
                    delta: 1
                })
            },
            // 切换单选状态
            toggleSelect(index) {
                this.list[index].checked = !this.list[index].checked;
                this.list = [...this.list]; // 触发视图更新
            },
            chatSubmit(){
                console.log(this.list);
                let select = [];
                this.list.forEach(item => {
                    if(item.checked){
                        select.push(item.toid);
                    }
                });
                uni.showModal({
                    title: '提示',
                    content: '确定要删除会话列表吗？',
                    success: (modal) => {
                        if (modal.confirm) {
                            uni.showLoading({
                                title:'加载中',
                                mask:true
                            })
                            select.forEach((item,index) => {
                                this.globalajax('chat/del', {
                                    source:2,
                                    toid:item
                                }, 'POST', (res) => {
                                    if(index+1 == select.length){
                                        uni.hideLoading();
                                        uni.showToast({
                                            title:'删除成功',
                                            icon:'none'
                                        });
                                        this.page = 1;
                                        this.list = [];
                                        this.getSessionFun();
                                    }
                                });
                            })
                        } else if (modal.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            },
            chatCancel(){
                this.isDel = !this.isDel;
            },
            getSessionFun(){
                this.globalajax('chat/getSession', {
                    source:2,
                    page:this.page
                }, 'POST',(res) => {
                    console.log(res);
                    this.list = this.list.concat(res.data.data.data);
                    this.list.forEach(item => {
                        item.checked = false;
                    })

                    this.totalPages = Math.ceil(res.data.data.total / 15);
                    if(this.list.length == 0){
                        this.noData = true;
                    } else{
                        this.noData = false;
                    }
                    if(this.page == this.totalPages){
                        this.loading = false;
                    }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .header{
        position: sticky;
        top: 0;
        z-index: 999;
        background: #fff;
        .headerBack{
            height: 188rpx;
            width: 100%;
        }
        .top_nav_box {
            position: absolute;
            left: 0;
            right: 0;
            z-index: 10;
        }
        .headerMain{
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 22rpx 32rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .fl{
                font-size: 36rpx;
                color: #fff;
            }
            .fr{
                image{
                    width: 48rpx;
                    height: 48rpx;
                }
                display: flex;
                align-items: center;
                text{
                    display: inline-block;
                    margin-left: 15rpx;
                    font-size: 28rpx;
                    color: #222;
                    &.submit{
                        color: #418AFF;
                    }
                }
            }
        }
    }
    .list{
        padding: 24rpx 32rpx;
        position: relative;
        z-index: 999;
        .li{
            padding: 24rpx 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(65, 138, 255, 0.60);
            .fl{
                image{
                    width: 96rpx;
                    height: 96rpx;
                    border-radius: 16rpx;
                }
            }
            .fr{
                flex: 1;
                padding-left: 24rpx;
                .h1{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .h1Fl{
                        font-size: 32rpx;
                        color: #333;
                        flex: 1;
                        padding-right: 32rpx;
                    }
                    .h1Fr{
                        font-size: 22rpx;
                        color: #666;
                    }
                }
                .h2{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 12rpx;
                    .h2Fl{
                        flex: 1;
                        padding-right: 32rpx;
                        font-size: 28rpx;
                        color: #666;
                    }
                    .h2Fr{
                        height: 28rpx;
                        border-radius: 28rpx;
                        padding: 0 6rpx;
                        font-size: 18rpx;
                        color: #fff;
                        background: #FF3C26;
                        line-height: 28rpx;
                    }
                }
            }
        }
    }
</style>
